<template>
  <div class="all">
    <div class="header">
      <el-row class="top">
        <el-col :span="13">欢迎来到媒介兔!</el-col>
        <el-col :span="11">
          <ul style="float:right">
            <li v-if="userdata" class="red">{{userdata.phone}} <span @click="zhuxiao">注销</span></li>
            <nuxt-link tag="li" to="/user">我的消息</nuxt-link>
            <li>入住媒体</li>
            <li>在线客服</li>
            <li>客服热线 027-8888-888</li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div class="h">
      <div class="search">
        <nuxt-link to="/" class="logo" tag="div"></nuxt-link>
      </div>
    </div>
    <div class="c" :style="{height:cwidth+'px'}">
      <div class="navMenu">
          <el-menu
            :default-active="$route.path"
            unique-opened
            router
            class="el-menu-vertical-demo"
          >
            <el-menu-item index="/user">
              <i class="el-icon-document" style="background:url('/usericon/personal_icon_defa01.png')"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
            <el-menu-item index="/user/2">
              <i class="el-icon-setting" style="background:url('/usericon/personal_icon_defa02.png')"></i>
              <span slot="title">我的订单</span>
            </el-menu-item>
            <el-submenu index="/user/3">
              <template slot="title">
                <i class="el-icon-document" style="background:url('/usericon/personal_icon_defa03.png')"></i>
                <span>资金管理</span>
              </template>
                <el-menu-item index="/user/3-1">我的账户</el-menu-item>
                <el-menu-item index="/user/3-2">我要充值</el-menu-item>
                <el-menu-item index="/user/3-3">我要提现</el-menu-item>
                <el-menu-item index="/user/3-4">我的押金</el-menu-item>
                <el-menu-item index="/user/3-5">发票索取</el-menu-item>
                <el-menu-item index="/user/3-6">绑定银行卡</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location" style="background:url('/usericon/personal_icon_defa04.png')"></i>
                <span>账号设置</span>
              </template>
              <el-menu-item index="/user/4-1">个人资料</el-menu-item>
              <el-menu-item index="/user/4-2">修改手机号</el-menu-item>
              <el-menu-item index="/user/4-3">修改登录密码</el-menu-item>
              <el-menu-item :index="realname_status==0?'/user/4-4':'/user/4-5'">实名认证</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-location" style="background:url('/usericon/personal_icon_defa05.png')"></i>
                <span>我的传媒</span>
              </template>
              <el-menu-item index="/user/5-1">申请传媒入驻</el-menu-item>
              <el-menu-item index="/user/5-2">全部传媒</el-menu-item>
              <el-menu-item index="/user/5-3">审核中的传媒</el-menu-item>
              <el-menu-item index="/user/5-4">已入驻的传媒</el-menu-item>
            </el-submenu>
            <el-menu-item index="/user/6">
              <i class="el-icon-setting" style="background:url('/usericon/personal_icon_defa06.png')"></i>
              <span slot="title">消息中心</span>
            </el-menu-item>
            <el-menu-item index="/user/7">
              <i class="el-icon-setting" style="background:url('/usericon/personal_icon_defa07.png')"></i>
              <span slot="title">咨询与投资</span>
            </el-menu-item>
          </el-menu>
      </div>
      <div class="usercontent" ref="elememt">
        <nuxt/>
      </div>
    </div>
    <div class="layoutfooter">
            <div class="layoutfooterContent">
                <div class="lFCitem">
                    <p>常见问题</p>
                    <p>广告主</p>
                    <p>媒体主</p>
                    <p>帮助中心</p>
                </div>
                <div class="lFCitem">
                    <p>交易保障</p>
                    <p>资金安全</p>
                    <p>交易规则</p>
                </div>
                <div class="lFCitem">
                    <p>联系客服</p>
                    <p>业务咨询</p>
                    <p>售后服务</p>
                    <p>资金客服</p>
                </div>
                 <div class="lFCitem">
                    <p>关于我们</p>
                    <p>公司简介 </p>
                    <p>商务合作</p>
                    <p>用户协议</p>
                </div>
                <div class="servicephone">
                    <div>
                        <p><i class="el-icon-phone-outline"></i> 全国客服热线</p>
                        <p>027-133212</p>
                        <p class="font14">每日 9:00 - 18:00</p>
                    </div>
                </div>
                <div class="erweima">
                    <div></div>
                    <p class="tac">二维码</p>
                </div>
            </div>
        </div>
        <div class="layoutfooter fff">
            <div class="layoutbotton">
                <div>鄂ICP备19013711号-1</div>
                <div>媒介兔(www.meijietu.cn)</div>
                <div>版本所有权:武汉中帜云媒网络</div>
                <div class="fr">举报邮箱:jubao@qq.com</div>
            </div>
        </div>
  </div>
</template>

<script>
import {gettoken} from '@@/assets/commen.js'
export default {
  data() {
    return {
      realname_status:0,
      cwidth:1200,
      // cwidth:this.$refs.elememt.clientHeight,
      userdata: this.$store.state.userdata
    }
  },
  methods: {
    zhuxiao(){
      this.$axios.post('/signOut',{},{headers:{'Authorization':'Bearer'+localStorage.getItem('access_token')}}).then(res => {
        console.log(res)
        this.$router.push('/')
      })
    }
  },
  mounted() {
    this.realname_status =JSON.parse(localStorage.getItem('userdata')).realname_status
     console.log(this.realname_status,this.userdata)
     gettoken().then(val =>{                 //刷新TOKEN,获取用户信息并记录
      if(val){
        this.$axios.post('/me',{},{headers:{'Authorization':'Bearer'+val}}).then(res =>{
        localStorage.setItem('userdata',JSON.stringify(res.data.data))
        this.userdata = res.data.data
      })
      }else{
        console.log('请登录')
      }
    }).catch(err => {
      console.log(err)
    })
  },
};
</script>

<style scoped>
.el-menu-item>span,
div.el-submenu__title>span{
  font-size: 16px;
}
.el-submenu [class^=el-icon-]{
  width: 20px;
  height: 20px;
  color: transparent;
}
.el-submenu .el-menu-item{
  text-indent: 20px;
}
.el-menu-item i{
  color: transparent;
}
.el-menu-item [class^=el-icon-] {
  width: 20px;
  height: 20px;
}
.userfooter{
  background-color: #000;
  height: 118px;
}
.usercontent{
  width: 1000px;
  /* min-height: 625px; */
  float: right;
  position: absolute;
  right: 0;
  top: 0;
}
.c {
  width: 1200px;
  /* 组件高度 */
  /* height: 1200px;         */
  margin: 0 auto;
  position: relative;
}
.navMenu{
  width: 170px;
  height: 625px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 5px;
}
.all {
  background-color: #f7f7f7;
}
a {
  text-decoration: none;
}
.top {
  display: flex;
  align-items: center;
}
.top ul li {
  list-style: none;
  float: left;
  padding: 0 10px;
  height: 13px;
  border-right: 1px #000 solid;
}
.top a {
  text-decoration: none;
  margin: 0 10px;
}
.top a.denglu {
  color: red;
}
.header {
  width: 100%;
  background-color: #f7f7f7;
  height: 33px;
}
.header .top {
  font-size: 12px;
  color: #656565;
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
.w {
  width: 100%;
  height: 126px;
  background-color: #f7f7f7;
}
.search {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 30px;
  height: 86px;
  align-items: center;
}
.h {
  width: 100%;
  background-color: #fff;
}
.logo {
  width: 158px;
  height: 42px;
  background: url("/logo.png");
}
</style>
